<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div>
        <!-- This is comment -->
        <strong></strong>
        <span></span>
        <em></em>
        <i></i>
        <b></b>
    </div>

    <div id="only" class="demo"></div>
    <!-- 这个元素节点又有两个属性节点 -->

    <script>
        
        console.log(document.nodeName); //document 也是一个节点

        var div = document.getElementsByTagName('div')[0];
        console.log(div);
        console.log(div.childNodes[0].nodeName);// 字符串形式的
        console.log(div.childNodes[1]);
        console.log(div.childNodes[1].nodeName);
        console.log(div.childNodes[3].nodeName);
        // nodeName 是只读的

        console.log(div.childNodes[1].nodeValue); //可以改，文本节点和注释节点


        // nodeType 该节点的类型，只读

        console.log(document.nodeType);//返回数字 9
        console.log(div.childNodes[1].nodeType);// 注释节点返回 8
        console.log(div.childNodes[0].nodeType);// 文本节点 3
        console.log(div.childNodes[3].nodeType);// 元素节点 1


        function retElementChild(node) {
            // no children
            var cNodes = node.childNodes;
            var cElementNodes = [];
            for(var i = 0; i < cNodes.length; i ++) {
                if(cNodes[i].nodeType == 1){
                    cElementNodes.push(cNodes[i]);
                }
            }
            return cElementNodes;
        }

        console.log(retElementChild(div));

        // 属性节点用处不大
        div1 = document.getElementsByTagName('div')[1];
        console.log(div1.attributes); // 该元素的属性节点的集合
        console.log(div1.attributes[0]); // 返回第一个属性节点
        console.log(div1.attributes[0].value); //可以直接赋值改
        console.log(div1.attributes[0].name);// 不可以改
        console.log(div1.attributes[0].nodeType); //返回 2


        // hasChildNodes

        console.log(div.hasChildNodes()); // 返回true
        console.log(div1.hasChildNodes()); // 返回 false


    </script>
</body>
</html>